<template>
  <div class="corner">
    <i class="top-l"></i>
    <i class="top-r"></i>
    <i class="bottom-l"></i>
    <i class="bottom-r"></i>
  </div>
</template>
<script>
export default {
  name: 'Corner'
}
</script>
<style lang="scss">
  .corner{
    position: absolute;
    top: 28px;
    left: 5px;
    right: 5px;
    bottom: 10px;
    .top-l{
      width: 20px;
      height: 20px;
      border-top-width: 2px;
      border-top-color: #33b5e3;
      border-top-style: solid;
      border-left-width: 2px;
      border-left-color: #33b5e3;
      border-left-style: solid;
      position: absolute;
      top: -2px;
      left: -2px;
    }
    .top-r{
      width: 20px;
      height: 20px;
      border-top-width: 2px;
      border-top-color: #33b5e3;
      border-top-style: solid;
      border-right-width: 2px;
      border-right-color: #33b5e3;
      border-right-style: solid;
      position: absolute;
      top: -2px;
      right: -2px;
    }
    .bottom-l{
      width: 20px;
      height: 20px;
      border-bottom-width: 2px;
      border-bottom-color: #33b5e3;
      border-bottom-style: solid;
      border-left-width: 2px;
      border-left-color: #33b5e3;
      border-left-style: solid;
      position: absolute;
      bottom: -2px;
      left: -2px;
    }
    .bottom-r{
      width: 20px;
      height: 20px;
      border-bottom-width: 2px;
      border-bottom-color: #33b5e3;
      border-bottom-style: solid;
      border-right-width: 2px;
      border-right-color: #33b5e3;
      border-right-style: solid;
      position: absolute;
      bottom: -2px;
      right: -2px;
    }
  }
</style>